import XtxSkeleton from './skeleton/index.vue'
import Carousel from './carousel/index.vue'
import XtxMore from './more/index.vue'
import { App } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
import Bread from './Bread/index.vue'
import BreadItem from './Bread/Item.vue'
import XtxCity from '@/components/city/index.vue'
import XtxNumbox from '@/components/numbox/index.vue'
import XtxButton from '@/components/button/index.vue'
import XtxCheckbox from '@/components/checkbox/index.vue'
import XtxMessage from '@/components/message/message.vue'
export default {
  install(app: App) {
    app.component('XtxSkeleton', XtxSkeleton)
    app.component('Carousel', Carousel)
    app.component('XtxMore', XtxMore)
    app.component('XtxBread', Bread)
    app.component('XtxBreadItem', BreadItem)
    app.component('XtxCity', XtxCity)
    app.component('XtxNumbox', XtxNumbox)
    app.component('XtxButton', XtxButton)
    app.component('XtxCheckbox', XtxCheckbox)
    app.component('XtxMessage', XtxMessage)

    // 自定义指令
    app.directive('lazy', {
      mounted(el: HTMLImageElement, { value }) {
        // 回调函数
        // 可选配置
        // value 当前指令值
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.src = value
            el.onerror = function () {
              el.src = defaultImg
            }
          }
        })
      },
    })
  },
}
